<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">

<style>
	*{
		padding: 0;
		margin: 0;
	}

	p{
		font-size: 26px;
		font-weight: bold;
		font-family: '微软雅黑';
		padding: 10px;
	}
	.i1{
		width:100px;
		height:100px;
	}
	.pic{
	margin-left: 10px;
	width:70px;
	overflow:hidden;
	}
	.picshow{
	margin-top: 10px;
	}
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
</style>

</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input v-model="user.uname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="user.email" placeholder="邮箱"></el-input>
              </el-form-item>
              <el-form-item label="电话号码">
                <el-input v-model="user.tel" placeholder="电话号码"></el-input>
              </el-form-item>
    
            <el-form-item label="权限">
              <el-select v-model="user.status" placeholder="权限">
                <el-option label="所有" value="0"></el-option>
                <el-option label="用户" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
                <el-option label="封禁" value="3"></el-option>
                <el-option label="未封禁" value="4"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="byselect(1)">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
          :data="members"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          label="用户编号"
          align="center"
          width="80px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.uid }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="用户头像"
          align="center"
          >
          <template slot-scope="scope">
            <span><img class="i1" :src=`../../../upload/${scope.row.pic}`></span>
          </template>
          </el-table-column>
          <el-table-column
          label="用户名"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.uname }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="电话"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.tel }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="邮箱"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="余额"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.balance }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="权限"
          align="center"
          width="120px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.status == 2 ? '封禁' : (scope.row.status == 0 ? '用户' : '管理员')}}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="密码操作"
          align="center"
          >
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="cz(scope.$index, scope.row)">重置密码</el-button>
          </template>
          </el-table-column>
          
          
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
          <el-button v-if="scope.row.status == 2"
          size="mini"
          type="danger"
          @click="noban(scope.$index, scope.row)">解禁</el-button>
          <el-button v-if="scope.row.status == 0"
          size="mini"
          type="danger"
          class="ban"
          @click="ban(scope.$index, scope.row)">封禁</el-button>
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
  		<el-pagination
    	layout="prev, pager, next"
    	:total="total"
    	:page-size="5"
    	:current-page="pagenum"
    	@current-change="byselect">
  		</el-pagination>
		</div>
    </el-card>
    
    <!-- 编辑信息弹框 -->
  <el-dialog title="修改用户信息" :visible.sync="updateUser" top="0">
    <el-form>
      <el-form-item label="用户名">
        <el-input v-model="update.uname" placeholder="用户名"></el-input>
      </el-form-item>
      <div style="align-content: center">头像:<input type="file" class="pic" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg"></div>
      <div class="picshow"><span><img class="i1" :src="picshow"></span></div>
      <el-form-item label="电话">
        <el-input v-model="update.tel" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="update.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="余额">
        <el-input v-model="update.balance" placeholder="余额"></el-input>
      </el-form-item>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateUser = false">取 消</el-button>
      <el-button type="primary" @click="updateData">确 定</el-button>
    </div>
  </el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>

<script>
	let app = new Vue({
		el:'#app',
		data:{
			user:{
                uname:'',
                email:'',
                tel:'',
                status:'所有'
            },
            members: [],
            updateUser : false,
            update:{},
            picshow:'',
            searchone:[],
    		pagenum: 1,
    		total:0,
		},
        mounted(){
            this.getAllUsers();
        },
		methods:{
            //获取用户信息
            getAllUsers(){
            	this.byselect(1);
            },
            //查询用户信息
            byselect(currentPage){
            	this.pagenum = currentPage;
            	this.searchone = this.user;
            	axios.post("../../userController/byselect", qs.stringify({
            		pagenum:this.pagenum,
            		uname:this.user.uname,
            		email:this.user.email,
            		tel:this.user.tel,
            		status:this.user.status
            	})).then(resp=>{
            		this.members = resp.data;
            		if(resp.data.length > 0){
    					this.total = Number(this.members[0].count);
    				}else{
    					this.total = 0;
    				}
            	});
            },
            //编辑信息弹窗
            handleEdit(index, obj){
            	this.updateUser = true;
            	this.update = JSON.parse(JSON.stringify(obj));
            	this.picshow ="../../../upload/" + this.update.pic;
    	    },
    	    //封禁
    	    ban(index, obj){
    	    	axios.post("../../userController/ban",qs.stringify({
    	    		uid:obj.uid
    	    	})).then(resp=>{
    	    		if(resp.data > 0){
    	    			alert("封禁成功");
    	    			//继续条件查询
    	    			this.byselect(this.pagenum);
    	    		}else{
    	    			alert("封禁失败");
    	    		}
    	    	});
    	    },
    	    //解禁
    	    noban(index, obj){
    	    	axios.post("../../userController/noban",qs.stringify({
    	    		uid:obj.uid
    	    	})).then(resp=>{
    	    		if(resp.data > 0){
    	    			alert("取消封禁成功");
    	    			//继续条件查询
    	    			this.byselect(this.pagenum);
    	    		}else{
    	    			alert("取消封禁失败");
    	    		}
    	    	});
    	    },
    	  //文章路径
    		getFile(event){
    			this.update.pic = event.target.files[0];
    			let URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                this.picshow = URL.createObjectURL(event.target.files[0]);
    		},
    		//修改用户信息
    		updateData(){
    			let config = {
						headers: {
							'Content-Type' : 'multipart/form-data'
						}
				};
    			let formData = new FormData();
    			formData.append("uid", this.update.uid);
				formData.append("uname", this.update.uname);
				formData.append("tel", this.update.tel);
				formData.append("email", this.update.email);
				formData.append("balance", this.update.balance);
				formData.append("pic", this.update.pic);
				axios.post("../../userController/updateUserData", formData, config).then(resp => {
					if(resp.data > 0){
						alert("编辑成功");
						//继续条件查询
    	    			this.byselect(this.pagenum);
					}else{
						alert("编辑失败");
					}
					this.updateUser = false;
				});
    		},
    		//重置密码
    		cz(index, obj){
    			axios.post("../../userController/cz",qs.stringify({
    				uid: obj.uid
    			})).then(resp=>{
    				if(resp.data > 0){
    					alert("重置密码成功");
    				}else{
    					alert("重置密码失败");
    				}
    			});
    		}
		}
	});
</script>

</body>
</html>